<template>
  <div class="add-tag-container">
    <a-form
        :model="formState"
         name="normal_login"
        class="login-form"
        :label-col="{span:6}"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="标签名"
          name="tagName"
          :rules="[{ required: true, message: '标签名为必填项目' }]"
      >
        <a-input v-model:value="formState.tagName" placeholder="新增标签名">
          <template #prefix>
            <TagOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="标签描述"
          name="tagDesc"
          :rules="[{ required: true, message: '描述为必填项目' }]"
      >
        <a-input v-model:value="formState.tagDesc" placeholder="新增标签描述">
          <template #prefix>
            <ContainerOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item style="text-align: right">
        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
          添加
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { TagOutlined,ContainerOutlined } from '@ant-design/icons-vue';
import {addTag} from "@/api/tag";
import {message,} from "ant-design-vue";

interface FormState {
  tagName: string;
  tagDesc: string;
}
const formState = reactive<FormState>({
  tagName: '',
  tagDesc: '',
});
const onFinish = async (values: any) => {
  try {
    let res:any = await addTag(values)
    if(res.code !== 200) return message.error(res.message)
    message.success(res.message)
    formState.tagDesc = ''
    formState.tagName = ''
  }catch (e:any) {
    message.error(e.message)
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
  return !(formState.tagName && formState.tagDesc);
});
</script>

<style lang="scss" scoped>
.add-tag-container {
  padding: 15px;
}
::v-deep .login-form {
  max-width: 350px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
